// 这也不用改，不用了
<template>
  <div class="news"
       ref="target">
    <el-backtop :visibility-height="60">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
    <img src="../assets/pic_banner.jpg"
         alt="头部介绍片"
         class="topImg" />
    <div class="head">
      <span>项目介绍</span>
    </div>
    <div class="border">
      <div class="body">
        <div class="new infinite-list-item"
             v-for="(li,index) in news"
             :key="index"
             @click="toDetails(li.id)"
             :style="li.yes">
          <!-- :style="order=(index%3)+1" -->
          <!-- <router-link to="/Home"> -->
          <div class="image">
            <img :src="li.picture"
                 alt="项目图片" />
          </div>
          <div class="msg">
            <div class="title">{{li.title}}</div>
            <div class="introduce">{{li.summary}}</div>
            <div class="time">{{li.updateTime}}</div>
          </div>
          <!-- </router-link> -->
        </div>
      </div>
    </div>

    <div class="foot"
         id="poll">
      <el-button type="primary"
                 @click="change"
                 v-show="showButton==1">更多项目</el-button>
      <img src="../assets/LoadingIndicator.png"
           alt="等待"
           v-show="showButton==2" />
      <p v-show="showButton==3"
         class="p1">我也是有底线的</p>
    </div>
  </div>
  <!-- </transition> -->
</template>

<script>
// import axios from "axios";
export default {
  name: "News",
  components: {},
  data () {
    return {
      news: [],
      getNews: [],
      showButton: 1,
      pageNum: 1,
      dataLength: 1,
      beginNum: 3, //刚开始显示的新闻的数量
      screenWidth: "", //屏幕宽
      screenHeight: "", //屏幕高
    };
  },
  computed: {},
  mounted () {
    var that = this;
    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    // if (this.screenWidth <= 658) that.beginNum = 1;
    // else
    if (this.screenWidth > 658 && this.screenWidth < 991)
      that.beginNum = 2;
    else that.beginNum = 3;
    this.$axios.get(`${this.baseURL}` + "/projectp/0").then((res) => {
      var listData = JSON.parse(JSON.stringify(res.data.data));
      that.dataLength = listData.length;
      that.pageNum = listData[that.dataLength - 1].id; //用于下一次获取数据
      var i;
      for (i = 0; i < listData.length; i++) {
        if (listData[i].updateTime != undefined)
          listData[i].updateTime = listData[i].updateTime.substring(0, 10);
      }
      // listData是规范时间之后的数据
      that.getNews = listData;
      var list = JSON.parse(JSON.stringify(that.getNews));
      list.splice(that.beginNum, list.length - that.beginNum);
      that.news = list; //三个或两个数据
      for (i = 0; i < that.news.length; i++) {
        that.news.yes = "visibility:visible";
      }
    });
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
        //还没有点击更多新闻的时候
        if (this.screenWidth <= 658) that.beginNum = 1;
        else if (this.screenWidth > 658 && this.screenWidth < 991)
          that.beginNum = 2;
        else that.beginNum = 3;
        // console.log(this.screenWidth);
        if (that.showButton == 1) {
          //没有展开
          if (this.screenWidth <= 658) that.beginNum = 3;
          var list = JSON.parse(JSON.stringify(that.getNews));
          list.splice(that.beginNum, list.length - that.beginNum);
          that.news = list; //三个或两个数据
          var i;
          for (i = 0; i < that.news.length; i++) {
            that.news.yes = "visibility:visible";
          }
        } else {
          that.news = [];
          that.news = JSON.parse(JSON.stringify(that.getNews));
          console.log(that.news);
          for (i = 0; i < that.news.length; i++) {
            that.news.yes = "visibility:visible";
          }
          //如果当前数据不是一行的整倍数就添加数据
          var s =
            (that.beginNum - (that.news.length % that.beginNum)) %
            that.beginNum;
          for (i = 0; i < s; i++) {
            that.news[that.news.length] = {};
            that.news[that.news.length - 1].yes = "visibility:hidden";
          }
          console.log;
          console.log(that.beginNum);
          console.log(that.news);
          console.log(that.getNews);
        }
      })();
    };

    this.scroll();
  },
  methods: {
    toDetails (id) {
      this.$router.push({
        name: "jsxq",
        query: {
          id: id,
        },
      });
    },
    scroll () {
      var that = this;
      window.onscroll = () => {
        let bottomOfWindow =
          document.documentElement.scrollTop + window.innerHeight >=
          document.documentElement.offsetHeight - 20;
        if (bottomOfWindow && !this.showButton) {
          // if (this.pageNum < this.pageAll) {
          this.waitY();
          setTimeout(function () {
            that.waitR();
            that.waitN();
          }, 500);
          // } else {
          // this.Nwait();
          // }
        }
      };
    },
    waitY () {
      this.showButton = 2;
    },
    waitR () {
      var that = this;
      this.$axios
        .get(`${this.baseURL}` + "/projectp/" + that.pageNum)
        .then((res) => {
          if (res.data.data[0] == undefined) this.Nwait();
          else {
            if (res.data.data.length < 6) this.Nwait(); //不会有下一次获取数据了
            var listData = JSON.parse(JSON.stringify(res.data.data));
            var i;
            for (i = 0; i < listData.length; i++) {
              if (listData[i].updateTime != undefined)
                listData[i].updateTime = listData[i].updateTime.substring(
                  0,
                  10
                );
            }
            // listData是规范时间之后的数据
            for (i = 0; i < listData.length; i++) {
              that.getNews[i + that.dataLength] = listData[i];
            }
            that.dataLength += listData.length;
            that.pageNum = listData[listData.length - 1].id; //用于下一次获取数据
            that.news = JSON.parse(JSON.stringify(that.getNews));
            for (i = 0; i < that.news.length; i++) {
              that.news.yes = "visibility:visible";
            }
            //如果当前数据不是一行的整倍数就添加数据
            var s =
              (that.beginNum - (that.news.length % that.beginNum)) %
              that.beginNum;
            for (i = 0; i < s; i++) {
              that.news[that.news.length] = {};
              that.news[that.news.length - 1].yes = "visibility:hidden";
            }
          }
        });
    },
    waitN () {
      this.showButton = false;
    },
    Nwait () {
      this.showButton = 3;
    },
    change () {
      this.news = JSON.parse(JSON.stringify(this.getNews));
      this.showButton = false;
    },
  },
};
</script>
<style scoped>
.news .topImg {
  width: 100vw;
}
.news {
  /* border: 1px solid black; */
  box-sizing: border-box;
  width: 100%;
  /* max-width: 1900px; */
  /* display: flex;
  justify-content: center; */
  /* width:expression(this.width > 1900 ? "1900px" : this.width); */
}

.head {
  box-sizing: border-box;
  /*height: 15vh;*/
  width: 100%;
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  font-size: 5vh;
  /* font-size: 38px; */
  font-family: Source Han Sans CN Normal;
  /*text-decoration:underline;*/
  margin-top: 5vh;
  /*font-weight: 500;*/
}

.head span {
  border-bottom: 4px solid #246be6;
  padding-bottom: 1vh;
  font-size: 5vh;
}
.border {
  display: flex;
  width: 100%;
  justify-content: center;
}
.body {
  /* height: 50vh; */
  display: flex;
  width: 100%;
  box-sizing: border-box;
  /* height: 100vh; */
  /* border: 1px solid black; */
  box-sizing: border-box;
  justify-content: center;
  max-width: 990px;
  flex-wrap: wrap;
  /* padding: 0 18%; */
  /* grid-template-columns: repeat(3, 31%); */
  /* grid-column-gap: 3.5%; */
  /*grid-row-gap: 5%;*/
  /* min-width:500px; */
}

.new {
  /* flex: 0 0 30%; */
  display: inline-block;
  /* border: 1px solid black; */
  box-sizing: border-box;
  /* height: 53vh; */
  height: 400px;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 2px #aaa;
  margin: 5.5vh 2vh 1vh 2vh;
  margin: 5.5vh 15px 1vh 15px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.new .image {
  box-sizing: border-box;
  height: 55%;
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  margin: 0;
  padding: 0;
}

.new .image img {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  box-sizing: border-box;
  height: 98%;
  width: 100%;
}

.new .msg {
  /*border: 1px solid black;*/
  box-sizing: border-box;
  padding: 4%;
  height: 45%;
  width: 100%;
  font-size: 1.8vh;
  /* font-size: 13.5px; */
  color: #b3c0d1;
  position: relative;
}

.new .msg .title {
  font-size: 2.4vh;
  /* font-size: 18px; */
  color: black;
  /*border: 1px solid black;*/
  box-sizing: border-box;
  /* height: 40%; */
  width: 100%;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.new .msg .introduce {
  /*border: 1px solid black;*/
  box-sizing: border-box;
  /* display: block; */
  /* height: 40%; */
  width: 90%;
  overflow: hidden;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  position: absolute;
  top: 40%;
  /* padding: 0 2%; */
}

.new .msg .time {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /*border: 1px solid black;*/
  box-sizing: border-box;
  height: 20%;
  width: 100%;
  position: absolute;
  bottom: 2%;
}

.foot {
  /* border: 1px solid black; */
  box-sizing: border-box;
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p1 {
  color: #ddd;
}
</style>
